<template>
    <form class="auth-wrap" @keypress.enter="submit" onsubmit="return false">
      <div class="form-item fx fx-center max-label" v-if="type == 1">
        <span class="form-label">公司/单位简称</span>
        <Input class="flex" placeholder="请输入公司/单位简称" v-model="short_name" />
      </div>
      <div class="form-item fx fx-center" v-if="isNew">
        <span class="form-label">登录密码</span>
        <Password class="flex" placeholder="6-30位含大小写字母数字组合" v-model="password" />
      </div>
      <div class="form-item fx fx-center" v-if="isNew">
        <span class="form-label">再次确认</span>
        <Password class="flex" placeholder="请再次输入密码" v-model="repassword" />
      </div>
      <div class="form-item fx fx-center" @click="switchParent">
        <div class="form-label switch-label">
          <p>您是否有上线</p>
          <span class="sub">上线将承担您的授信额度的审核</span>
        </div>
        <div class="switch">
          <label>{{has_pareant ? '是' : '否'}}</label>
          <div class="ui-switch" :class="{'on':has_pareant}"></div>
        </div>
      </div>
      <template v-if="!!has_pareant">
        <div class="form-item fx fx-center">
          <span class="form-label">户口号</span>
          <Input type="tel" class="flex" placeholder="请输入上线户口号" v-model="parentcode" />
        </div>
        <div class="form-item fx fx-center">
          <span class="form-label">全名/昵称</span>
          <Input class="flex" placeholder="请输入上线的全名或昵称（单位名称/单位简称）" v-model="parentname" />
        </div>
      </template>
      <a class="btn btn-block btn-primary submit" :disabled="!valid_form" @click="submit($event)">注册</a>
  </form>
</template>

<script>
import Password from '~/components/Password';
import Input from '~/components/Input';

export default {
  validate({params,redirect,query}){
    if(!params.token && !query.isNew){
      redirect('/register');
    }
    return true
  },
  components:{
    Password,
    Input
  },
  asyncData({query,params}){
    return {
      type:query.type,
      origin:query.origin,
      originType:query.originType,
      isNew:query.isNew
    }
  },
  data(){
    return {
      show_passord:false,
      short_name:'',
      password:'',
      repassword:'',
      posting:false,
      has_pareant:0,
      parentcode:'',
      parentname:'',
      flag: false,
    }
  },
  computed: {
    valid_form(){
      this.flag = (!!String(this.password).trim() && !!String(this.repassword).trim()) || !this.isNew;
      if(this.type == 1){
        this.flag = this.flag && !!String(this.short_name).trim()
      }
      if(this.flag && this.has_pareant) this.flag = !!String(this.parentname).trim() && !!String(this.parentcode).trim();
      return this.flag && !this.posting;
    }
  },
  mounted(){
    this.$emit('changeBg','#fff');
  },
  methods: {
    checkPassword(value){
      var lv = 0;var val = value;
      if (val.match(/[A-Z]/g)) {
        lv++;
      }
      if (val.match(/[a-z]/g)) {
        lv++;
      }
      if (val.match(/[0-9]/g)) {
        lv++;
      }

      if (lv < 3 || value.length < 6 || value.length >30) {
        this.$toast('密码格式不正确');
        return false;
      } else {
        return true;
      }
    },
    recheckPassword(){
      if(this.password !== this.repassword){
        this.$toast('两次密码不一致');
        return false;
      }
      return true;
    },
    async submit(e){
      if(this.posting
      || !this.valid_form
      || (this.isNew ? !(this.checkPassword(this.password) && this.recheckPassword()) : false)) return false;
      this.posting = true;
      let form = this.$store.getters["register/getFormData"]
      let params = {
        email: form.email,
        phone: form.phone,
        phone_area_code: form.phone_area_code,
        potato: form.potato,
        potato_area_code: form.potato_area_code,
        ver_code: form.ver_code,
        password: this.password,
        by: form.by,
        short_name: this.short_name,
        has_pareant:this.has_pareant,
        parentcode:this.parentcode,
        parentname:this.parentname,
        origin: this.origin,
        originType: this.originType,
        type:this.type
      };
      let token = this.$store.getters.getToken;

      try{
        let { data:rs } = await this.$axios.post('?ct=member&ac=register',params)

        if(rs.code === 0){
          const { data } = rs;
          //清空表单状态
          this.$store.commit('register/SET_FORM',null);
          this.$toast('注册成功',2000);
          // 缓冲登录token，uid
          this.$store.commit("SET_UID",data.uid);
          this.$store.commit("SET_TOKEN",data.token);
          this.$store.commit("SET_USER",data);

          // type 1是机构(一定跳到账号选择列表页)  2是个人（多个账号才会跳到）
          setTimeout(() => {
            if (data.is_need_reset_pwd == 1) {
              sessionStorage.setItem('recheck_user',JSON.stringify(data));
              this.$router.push({name:'login-password',
                query:{
                  from:'register',
                  originType: this.originType,
                  origin:this.origin
                },
              });
            } else if(this.type == 1 || (this.type == 2 && rs.select_member == 1)) {
              this.$router.push({
                name:'login-list',
                params:{token:data.token, list:data.group_labels, type:this.type},
                query: {
                  origin:this.origin,
                  originType:this.originType,
                  isNew: this.isNew,
                }
              });

            //
            } else {
               //登录成功后跳到首页  -- 是否完善资料+扫描进来
              if((this.origin == 4 && data.flow_status == 0) || (this.isNew && this.origin == 4)) {
                this.$router.push({name:'complete_info'});
              } else {
                this.$router.replace('/');
              }
            }
          }, 2000)

        }else {
          this.$toast(rs.msg);
          this.posting = false;
        }
      }catch(e){
        this.$error(e);
        this.posting = false;
      }

    },
    switchParent(){//切换上线显示
      this.has_pareant = this.has_pareant ? 0 : 1;
      this.parentname = '';
      this.parentcode = '';
    },
  }
}
</script>

<style lang="less" scoped>

  .page-auth-content .form-item .form-label {
    width: auto;
    min-width: 130px;
  }

  .submit {
    margin-top:60px;
  }
  .switch-label.form-label {
    flex:1;
    width:auto;
    .sub {
      display: block;
      font-size:24px;
      color:rgb(153,153,153);
    }
  }
  .switch {
    display: flex;
    align-items: center;
    label {
      display: block;
      font-size:30px;
      color:#414141;
      margin-right:22px;
    }
  }
</style>


